
<template>
    <div class="wrap">

        <div class="two">
            <div class="two-top">
                <img src="../assets/images/3.jpg">
                <div class="header-img">
                    <img :src="userinf.headimgurl">
                </div>
            </div>

            <div class="two-text flex">
                <h1><b>{{userinf.nickname}}</b></h1>
                <div class="status flex">
                    <span>lv.{{list.score}}</span>
                    <h2>21克会员</h2>
                </div>

                <div class="text-bom flex">
                    <ul class="flex">
                        <li>
                            <a href="javascript:;" class="flex">
                                <span>{{list.attentionCount}}</span>
                                <h3>关注</h3>
                            </a>
                        </li>

                        <li>
                            <a href="javascript:;" class="flex">
                                <span>{{list.FansCount}}</span>
                                <h3>粉丝</h3>
                            </a>
                        </li>

                        <li>
                            <a href="javascript:;" class="flex">
                                <span>{{list.myPraise}}</span>
                                <h3>获赞</h3>
                            </a>
                        </li>
                    </ul>
                    <a href="javascript:;" @click="goFollow">{{followText}}</a>
                </div>

                <div class="tb-bom">
                    <h2>加入21克已经{{list.days}}天了</h2>
                    <h3><b>{{userinf.introduction}}</b></h3>
                </div>
            </div>

            <div class="two-approve">
                <ul>
                    <li>
                        <a href="javascript:;" class="flex"><h2>实力认证</h2><span>{{userinf.ssmName}}</span></a>
                    </li>
                </ul>
            </div>

            <div class="two-main">
                <div class="two-main-btn flex">
                    <a href="javascript:;" :class="!baby_dis && 'active'" @click="baby_dis=0">宝贝</a>
                    <a href="javascript:;" @click="getComment" :class="baby_dis && 'active'">评价</a>
                </div>


                <div class="two-main-wrap" v-if="baby_dis==0">
                    <div v-for="(lists,index) in shoplist" :key="index">   
<!-- goodsId -->       <router-link :to="{ path:'/secGoodsDetail',query:{goodsId:lists[0].id}}">
                        <div class="two-main-list">
                            <div class="two-main-top flex">
                                <img :src="userinf.headimgurl" class="head">
                                <div class="text flex">
                                    <h2><b>{{lists[0].shopName}}</b><span>已认证</span></h2>
                                    <div>
                                        <em>{{list.schoolName}}</em>
                                    </div>
                                </div>
                            </div>


                              <swiper :options="swiperOption" ref="mySwiper" class="swiper-box">
                                <swiper-slide  class="swiper-slide" :key="ind" v-for="(item,ind) in JSON.parse(lists[0].detailImgs)" ><img :src="item" class="swiper-one"></swiper-slide>
                              </swiper>
                            <!-- <div class="pl">
                                <h2>噼里啪啦：<span>东西还在么？</span></h2>
                                <h2>噼里啪啦：<span>东西还在么？</span></h2>
                            </div> -->
                        </div>
                        <div class="price">
                                <div class="price-box flex">

                                    <div class="default">
                                        <span class="span1">￥{{lists[0].price}}</span>
                                        邮费<span>￥{{lists[0].postPrice}}</span>
                                    </div>

                                    <div class="right">
                                        <a href="javascript:;" class="a1">
                                            超赞
                                        </a>·
                                        <a href="javascript:;">留言{{lists[0].leaveMessageCount}}</a>
                                    </div>
                                </div>

                            </div>
                      </router-link>
                    </div>
                </div>
                <div class="two-main-wrap" v-else>
                   <div class="comment" v-if="commonlist.length<1">您暂时没有收到评价</div>
                   <div class="commom-list" v-else>
                       <div class="bo-com">共收到{{commtotal}}条评价</div>
                       <div class="bo-com" v-for="(commonlistitem,index) in commonlist" :key="index">
                           <div class="imgbix">
                               <div class="img">
                                   <img :src="commonlistitem.headimgurl" alt="">
                               </div>
                               <span class="text-co">{{commonlistitem.nickname}}</span>
                           </div>
                           <div class="shop-img">
                               <div class="imgbox">
                                   <img :src="commonlistitem.image" alt="">
                               </div>
                               <div class="com-text">
                                   {{commonlistitem.content}}
                               </div>
                           </div>
                       </div>
                   </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import axios from '@/api/request'
import { swiper, swiperSlide } from "vue-awesome-swiper";
import { mapState,mapGetters } from "vuex";
export default {
    data() {
        return {
            list:{},
            userinf:{},
            swiperOption: {
                notNextTick: true,
                // swiper configs 所有的配置同swiper官方api配置
                freeMode: true,
                slidesOffsetAfter: 0,
                spaceBetween: 11
            },
            baby_dis: 0,
            followText:'关注',
            shoplist:[],
            commonlist:[],
            commtotal:''

        };
    },
    name: "twoPerson",

    created() {
        this.fetchUserInfo()
        this.getFollow()
        
    },
   computed:{
            ...mapGetters({
              openId: 'doneOpenId',
              userId: 'doneUserId',
              phone: 'donePhone',
              schoolId: 'doneSchoolId',
            }),
        },
    methods: {
        getComment(){//获取评价   device/agreement/searchOne
          var self=this
          self.baby_dis=1
          let data={
              shopId:this.userinf.shopSecondId,
              type:'4'
          }
             axios('/device/appraises/list','post',data).then(res=>{
                if(res.data.code==1000){
                 //  console.log(res)
                    self.commtotal=res.data.data.total
                    self.commonlist=res.data.data.list
                }
            })
        },
        goFollow(){
            let  disType=""
            if(this.followText=="已关注"){
                disType =1
            }else{
                disType =0
            }
            var self=this
          let data={
            dis:disType,  //     0   关注      1   取消关注
            userId:this.userId,
            type:3,           // 关注用户
            proxyId:this.$route.query.id
          }
          axios('/device/collection/inIf','post',data).then(res=>{
             // console.log(res)
                if(res.data.code==1000){
                   if(disType==1){
                     self.$vux.toast.text('取消关注！', 'middle')
                     this.followText="关注"
                   }else{
                     self.$vux.toast.text('关注成功！', 'middle')
                     this.followText="已关注"
                   }
                    
                }
            })
        },
        getFollow(){   //判断是否关注
           let data = {
              userId: this.userId,
              proxyId:this.$route.query.id,
            }
            axios('/device/collection/difference','post',data).then(res=>{
                console.log(res)
                if(res.data.code==1000){
                    if(res.data.data.userEntity==1){
                      this.followText="已关注"
                    }else{
                        this.followText="关注"
                    }
                    
                }
            })
        },
        fetchUserInfo() {    
            let data = {
                pageNumber: 1,
                pageSize: 10,
                param:{
                  userId: this.$route.query.id,
                }
            }
            axios('/device/userEntity/getUserCenterById','post',data).then(res=>{
                console.log(res)
               if(res.data.code==1000){
                    this.list=res.data.data
                    this.userinf=res.data.data.userCenter
                    this.shoplist=res.data.data.ProductAndMessage
                }
            })
        },
        fetchGoods() {    //根据店铺id获取宝贝
            let data = {
                shopId:'c5233e3802214445986231ed12b0d863'
            }
            axios('/device/shopSecond/babyProduct','post',data).then(res=>{
                if(res.data.code==1000){
                   // console.log(res)
                    
                }
            })
        },

    }
};
</script>

<style>

@import "../assets/css/swiper.min.css";
</style>
<style lang="less" scoped>
@import "../assets/css/person.css";
.shop-img{
    height:80px;
    display: flex;
    color: #999;
    .com-text{
        flex:1;
        overflow: hidden;
    }
    .imgbox{
        height:80px;
        width:80px;
        margin-right: 16px;
        overflow: hidden;
        img{
            width:80px;
            height:100%;
        }
    }
}
.img{
    width: 0.906667rem;
    height:0.906667rem;
    line-height: 0.906667rem;
    margin-right: 0.24rem;
    overflow: hidden;
    img{
        width: 0.906667rem;
    height:0.906667rem;
    border-radius: 100%;
    }
}
.comment{
    text-align: center;
}
.swiper-one{
    width:100%;
    min-height:100%;
}
.bo-com{
    border-bottom: 1px solid #ddd;
    padding:0px 0.533333rem 14px  0.533333rem ;
}
.head{
    border-radius: 100%;
}
.commom-list{
  
}
.text-co{
    flex:1;
    color: #999999;
}
.imgbix{
    padding-top: 0.2rem;
    display: flex;
}
    .swiper-box {
        .swiper-slide {
            margin-right: 7px !important;
        }
    }
</style>

